<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        img {
            position: absolute;
        }
    </style>
</head>

<body>

    <img src="angel.gif" alt="">

    <script src="./jquery.js"></script>

    <script>
        // 单位时间内（16ms），最多，只允许图片跟随一次
        // 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
        // let timer = null; // 值只有两种，一个是null，另一种是数字
        // $(document).on('mousemove', function (e) {
        //     console.log(111, e)
        //     // 判断，如果 timer===null，允许下面的定时器运行；
        //     // 如果timer是一个数字，说明有一个定时器正在运行；不允许再次设置定时器
        //     if (timer !== null) return;

        //     timer = setTimeout(() => {
        //         // 下面的代码，在 16ms 内，最多只允许运行一次
        //         $('img').css({ left: e.pageX + 'px', top: e.pageY + 'px' })
        //         console.log(222)
        //         // 当定时器执行完毕，重置timer=null
        //         timer = null;
        //     }, 16);
        // })
        $(document).on('mousemove', throttle(move, 1000))

        // 这两个变量要声明成全局变量，才可以在图片移动的方法中使用
        var pageX = 0
        var pageY = 0
        function move() {
            $(document).on('mousemove', function (e) {
                // console.log('e', e);
                pageX = e.pageX
                pageY = e.pageY
                // console.log(111222, pageX, pageY)
            })
            // console.log(111, pageX, pageY)
            $('img').css({ left: pageX + 'px', top: pageY + 'px' })
            console.log(222)
        }

        function throttle(func, wait) {
            let timeout;
            return function () {
                let context = this;
                let args = arguments;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }

            }
        }
    </script>

</body>

</html>